<template>
    <el-select v-model="value" filterable remote :placeholder="placeholder" :remote-method="remoteMethod"
        :loading="loading" @visible-change='visibleChange' @change="handleChange" ref="select" clearable>
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
        <slot></slot>
        <div slot="empty">
            <p :class="prop == 'productId' || prop == 'unitId' ? 'fromProduct' : 'fromProcessRoute'">暂无数据</p>
            <el-button type="text" icon="el-icon-circle-plus-outline" style="padding:10px 0 10px 20px"
                @click="clickHandle" v-show="prop == 'productId' || prop == 'unitId'">
                添加新{{prop == 'productId' ? '产品' : '单位'}}
                {{addNew}}
            </el-button>
        </div>
    </el-select>
</template>

<script>
    import request from '@/utils/request'
    export default {
        data() {
            return {
                options: [],
                value: '',
                loading: false,
                addNew: '',
            }
        },
        props: {
            placeholder: {
                type: String,
                default: ''
            },
            url: {
                type: String,
                default: ''
            },
            prop: {
                type: String,
                default: ''
            },
            id: [String, Number]
        },
        methods: {
            getUrl(data) {
                return request({
                    url: this.url,
                    method: 'post',
                    data
                })
            },
            getDataList(data) {
                this.getUrl(data).then(res => {
                    this.loading = false;
                    if (res.code == 200) {
                        this.options = res.data.map(item => {
                            return {
                                value: item.id,
                                label: this.prop == 'productId' ? 
                                    item.code + ' - ' + item.name + (item.specification && (' - ' + item.specification)) : item.name,
                            };
                        });
                        this.value = this.id
                    }
                })
            },
            //下拉框打开时
            visibleChange(flag) {
                if (flag) this.remoteMethod('')
            },
            remoteMethod(query) {
                this.loading = true;
                this.addNew = query
                this.getDataList({
                    name: query
                })
            },
            handleChange(v) {
                let p
                let splitArr
                let productInfo
                let unitName 
                if(this.prop == 'productId' && v){
                    p = this.options.find(i => v == i.value)
                    splitArr = p.label.split('-')
                    productInfo = {
                        code:splitArr[0].trim(),
                        name:splitArr[1].trim(),
                        specification:splitArr[2] && splitArr[2].trim(),
                    }
                }else if(this.prop == 'unitId' && v){
                    unitName = this.options.find(i => v == i.value).label
                }
                this.$emit('handleChange', {
                    v,
                    prop: this.prop,
                    productInfo:productInfo || {},
                    unitName:unitName || ''
                })
            },
            blur() {
                this.$refs.select.blur()
            },
            clickHandle() {
                this.$emit('clickHandle', this.addNew, this.prop)
            },
            reset() {
                this.value = ''
            }
        },
    }
</script>
<style lang="less" scoped>
    .fromProduct{
        color: rgba(0,0,0,.25);
        font-size:12px;
        padding:10px 0 0 22px;
    }
    .fromProcessRoute{
       color: #999;
       font-size:14px;
       padding:15px;
       text-align:center
    }
</style>